<template>
  <div class="page-404-container">
    <div class="left-img-group">
      <img class="left-image-style" src="../assets/404.png" alt />
    </div>
    <div class="right-content-group">
      <div class="content-title">OOPS!</div>
      <div class="content-info">哎呀！页面不小心走丢了！</div>
      <div class="content-label">前端开发人员：@杨诗杰，@汪凯</div>
      <div class="content-label">点击下面的按钮回到首页吧！</div>
      <div class="content-button">
        <el-button type="primary" @click="goIndex" round>回到首页</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Page404",
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    goIndex() {
      this.$router.replace("/index");
    }
  },
  created() {},
  mounted() {}
};
</script>

<style scoped>
.page-404-container {
  display: flex;
  position: relative;
}
.left-image-style {
  width: 600px;
  height: 300px;
  position: absolute;
  left: 15vw;
  top: 20vh;
}
.content-title {
  font-size: 30px;
  font-weight: bold;
  color: #1582f0;
  padding: 20px 0;
}
.content-label {
  font-size: 14px;
  color: gray;
  /* padding: 10px 0; */
}
.content-info {
  font-size: 40px;
  font-weight: bold;
  padding: 20px 0;
}
.right-content-group {
  width: 600px;
  height: 300px;
  position: absolute;
  right: 7vw;
  top: 20vh;
}
.content-button {
  padding: 30px 0;
}
</style>